import { Select } from 'antd'
import { CSSProperties } from 'react'
import { IFornItem, IOption } from './interface'
const { Option } = Select;

interface IScope extends IFornItem<string> {
  datakey: string;
  style?: CSSProperties,
  scopeOption: IOption[],
  type: 'left' | 'right'
}


const leftOption = [{
  label: ' ',
  value: 'null'
},
{
  label: '(',
  value: 'leftParenthesis'
}]

const rightOption = [{
  label: ' ',
  value: 'null'
},
{
  label: ')',
  value: 'rightParenthesis'
}
]


/**
 * 范围组件
 * **/
export const Scope = (props: IScope) => {

  const scopeOption = props.scopeOption ? props.scopeOption : props.type === 'left' ? leftOption : rightOption
  const cls = props.cls ? props.cls + '-scope' : '';
  function handleChange(value: string) {
    props.onChange({
      [props.datakey]: value
    })
  }


  return <Select
    className={cls}
    placeholder={'请选择'}
    style={{
      minWidth: 60,
      ...props.style
    }}
    value={props.value}
    onChange={handleChange}>
    {
      scopeOption.map((item) => {
        return <Option key={item.value} value={item.value}>{item.label}</Option>
      })
    }
  </Select>
}